<template>
  <div class="navbtm">
    <!-- 弹出框 -->
    <van-popup
      class="navbtm_container"
      v-model="show"
      :style="{ height: '74%', width: '101%' }"
      @closed="click"
    >
      <div class="section">
        <h2>距离</h2>
        <div class="items">
          <div
            class="item"
            @click="btnOne(index)"
            v-for="(item, index) in aar"
            :key="index"
            :class="{ red: index + 1 === jvPic }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="section">
        <h2>评分</h2>
        <div class="items">
          <div
            class="item"
            :class="{ red: index === pingfen }"
            v-for="(item, index) in bbr"
            :key="index"
            @click="btnTw(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="btn">
        <van-row gutter="20">
          <van-col span="8">
            <van-button
              plain
              type="primary"
              color="red"
              class="btn1"
              @click="eliminate"
            >
              清除</van-button
            >
          </van-col>
          <van-col span="16">
            <van-button type="danger" @click="queren">确认</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>

<script>
// const indexitem = () => import('./indexItem')
// import indexitem from './indexItem'
export default {
  props: ['jvPic', 'tuijian'],
  data () {
    return {
      show: false,
      // 距离
      aar: [
        { name: '有近到远', id: 'asc' },
        { name: '由远到近', id: 'desc' }
      ],
      // 距离高亮
      jvli: -1,
      // 筛选评分
      bbr: [
        { name: '4分-5分', id: '4-5' },
        { name: '3分-4分', id: '3-4' },
        { name: '2分-3分', id: '2-3' },
        { name: '1分-2分', id: '1-2' },
        { name: '1分以下', id: '0-1' }
      ],
      // 评分高亮
      pingfen: -1,
      // 参数
      qiye: {
        q: '',
        limit: 5
      }
    }
  },
  // components: { indexitem }
  methods: {
    arr () {
      this.$emit('passShow', this.show)
    },
    click () {
      this.$emit('passShow', this.show)
    },
    // 点击确认
    queren () {
      if (this.jvPic === 0) {
        this.qiye.distance = undefined
      } else {
        this.qiye.distance = this.aar[this.jvPic - 1].id
      }
      if (this.pingfen === -1) {
        this.qiye.scoreRange = undefined
      } else {
        this.qiye.scoreRange = this.bbr[this.pingfen].id
      }
      this.$emit('passList', this.qiye)
      this.show = false
    },
    // 点击选距离
    btnOne (index) {
      this.jvli = index + 1
      this.$emit('passJvli', this.jvli)
    },
    btnTw (index) {
      this.pingfen = index
    },
    // 点击清除
    eliminate () {
      this.tuijian()
      this.pingfen = -1
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.navbtm {
  .navbtm_container {
    padding: 0 20px;
    .section {
      padding: 0.29333rem 0.4rem 0.48rem;
      h2 {
        font-size: 0.48rem;
      }
      .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .item {
          width: 40%;
          height: 35px;
          background: #f9f8f8;
          border-radius: 5px;
          font-size: 0.32rem;
          text-align: center;
          line-height: 35px;
          margin-bottom: 0.26667rem;
          &:nth-child(5) {
            margin-right: 155px;
          }
        }
      }
    }
    .btn {
      text-align: center;
      margin-top: 30px;
      .van-button {
        width: 100%;
        border-radius: 10px;
      }
      .btn1 {
        background-color: #ffe2e9;
        border: 0;
      }
    }
  }
}
/deep/.van-overlay {
  transform: translateY(122px);
}
.red {
  color: red;
}
</style>
